<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fnt" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta name="author" content="order by dede58.com"/>
		<title>CDC疾控中心</title>
		<link rel="stylesheet" type="text/css" href="<%=path%>/web/css/style1.css">
		<style type="text/css">
			img.wp-smiley,img.emoji {
				display: inline !important;
				border: none !important;
				box-shadow: none !important;
				height: 1em !important;
				width: 1em !important;
				margin: 0 .07em !important;
				vertical-align: -0.1em !important;
				background: none !important;
				padding: 0 !important;
			}
			input[type="submit"] {
				background: #f0f0f0;
				color: #000;
				font-size: 18px;
				border: none;
				text-transform: capitalize;
				width: 10%;
				outline: none;
				cursor: pointer;
				-webkit-appearance: none;
				padding: 14px 0;
				margin-top: 5px;
				margin-left: 800px;
				transition: 0.5s all;
				-webkit-transition: 0.5s all;
				-moz-transition: 0.5s all;
				-o-transition: 0.5s all;
			}
		</style>
		<link rel="stylesheet" href="<%=path%>/web/css/style/style2.css" />
		<script src="<%=path%>/web/js/jq.js"></script>
		<script src="<%=path%>/web/js/jq1.js"></script>
	</head>
<body>
<jsp:include page="headerandfoter/header.jsp"></jsp:include>
	<br><br><br>
<!-- end banner_x -->
<!-- self_info -->
	<div class="grzxbj">
		<div class="selfinfo center">
		<div class="lfnav fl">
			<div class="subddzx">
				<ul>
					<li></li>
					<li><a href="<%=path%>/services/user_info"><img src="<%=path%>/asdf/images/${userInfo.pic}" style="width:150px; height:150px; border-radius:100%; overflow:hidden; "></a></li><br><br><br><br><br><br><br><br><br><br>
					<li>${userInfo.userName}</li>
				</ul>
			</div>
			<div class="ddzx"><a href="<%=path%>/services/update_user_info">修改资料</a></div>
			<div class="ddzx"><a href="<%=path%>/services/update_password">修改密码</a></div>
			<div class="ddzx"><a href="<%=path%>/services/my_collection">我的收藏</a></div>
			<div class="ddzx"><a href="<%=path%>/services/examination_record">考试记录</a></div>
		</div>
		<div class="rtcont fr">
			<div class="grzlbt ml40">修改密码</div>
			<form id="updateForm" action="/services/update_password_form" method="post">
				<div class="subgrzl ml40"><span>密码</span>
					<span><input style="border: none;padding: 15px 0px 12px 5px;font-size: 15px;" type="password" name="password" id="password" placeholder="请输入新密码" required=""/></span><span id="passwordMsg"></span></div>
				<div class="subgrzl ml40"><span>确认密码</span>
					<span><input style="border: none;padding: 15px 0px 12px 5px;font-size: 15px;" type="password" name="ispassword" id="ispassword" placeholder="请再次输入密码" required=""/></span><span id="ispasswordMsg"></span></div>
				<div class="subgrzl ml40"><span>验证码</span>
					<span><input style="border: none;padding: 15px 0px 12px 5px;font-size: 15px;" type="text" id="emailCode" name="emailCode" placeholder="请输入验证码" required=""/></span>
					<span id="emailCodeMsg"></span>
					<a href="javascript:void(0)" id="sendCode"><div style="width: 32%;font-size: 14px;color:#1b1b1b;float: left;line-height: 40px;padding-left: 7px" id="text">获取验证码</div></a></div>
				<input type="submit" value="确定"/>
				<br><br>
			</form>
		</div>
		<div class="clear"></div>
		</div>
	</div>
<!-- self_info -->
<jsp:include page="headerandfoter/foter.jsp"></jsp:include><!-- 包含尾部 -->
	<script type="text/javascript">
		$(function() {
			$("#password").blur(checkPassword);
		});
		function checkPassword() {
			var reg = /^\w{6,16}$/;
			var password = $("#password").val();
			var flag1 = reg.test(password);
			if (flag1 == true)
			{
				$("#passwordMsg").html("√");
				$("#passwordMsg").css("color", "green");
			} else
			{
				$("#passwordMsg").html("×");
				$("#passwordMsg").css("color", "red");
				return false;
			}
		}
		$(function() {
			$("#ispassword").blur(checkIsPassword);
		});
		function checkIsPassword() {
			var m = $("#password").val();
			var ispassword = $("#ispassword").val();
			if (ispassword == m) {
				if (m == 0) {
					$("#ispasswordMsg").html("×");
					$("#ispasswordMsg").css("color", "red");
				} else {
					$("#ispasswordMsg").html("√");
					$("#ispasswordMsg").css("color", "green");
				}
			} else {
				$("#ispasswordMsg").html("×");
				$("#ispasswordMsg").css("color", "red");
				return false;
			}
		}
		$(function() {
			$("#sendCode").click(sendCode);
		});
		function sendCode() {
			var path = "<%=path%>";
			var email = "${userInfo.email}";
				$.get(path+"/services/sendEmail",
						{email:email},
						function (data) {
							if (data == "0") {
								$("#emailMsg").html("邮箱重复");
								$("#emailMsg").css("color", "red");
							} else {
								$("#text").html("重新获取验证码");
								$("#email").attr("readonly", "readonly");
								$("#email").css("cursor", "not-allowed");
								$("#email").css("background-color", "#FBFBFB");
							}
						}
				);
		}
		$(function() {
			$("#emailCode").blur(checkEmailCode);
		});
		function checkEmailCode() {
			var path = "<%=path%>";
			var emailCode=$("#emailCode").val();
			var flag = false;
				if (emailCode == "") {
					$("#emailCodeMsg").html("x");
					$("#emailCodeMsg").css("color", "red");
					return false;
				} else {
					$.get(path+"/services/isEmailCode",
							{emailCode:emailCode},
							function (data) {
								if (data == "0") {
									$("#emailCodeMsg").html("√");
									$("#emailCodeMsg").css("color", "green");
									flag = true;
								}
								if (data == "1") {
									$("#emailCodeMsg").html("验证码错误");
									$("#emailCodeMsg").css("color", "red");
									flag = false;
								}
							});
					return flag;
				}
		}
		$(function() {
			$("#updateForm").submit(check);
		});
		function check() {
			var flag1 = checkPassword();
			var flag2 = checkIsPassword();
			var flag3 = checkEmailCode();
			return flag1 && flag2 && flag3;
		}
	</script>
</body>
</html>